<template>
	<view class="bg-white round-8 p-15 mb-15">
		<text class="fs-15 fw-bold" v-if="props.title">{{props.title}}</text>
		<view class="bg-fa round-8 flex flex-center w-p-100 h-180 relative mt-5">
			<view class="flex flex-column gap-4 flex-y-center" v-if="props.modelValue==''" @click="upload">
				<text class="iconfont icon-shangchuanwenjian fs-30 text-666"></text>
				<slot>
					<text class="fs-14 ">点击上传图片</text>
				</slot>
			</view>
			<image :src="props.modelValue" v-else class=" h-p-100 round-8" mode="heightFix" @click="view"></image>
			<view class="btn-blue absolute bottom-8" v-if="props.modelValue!=''" @click="upload">重新上传</view>
		</view>
	</view>
</template>

<script setup>
	import { uploadImg } from '@/api/system.js'
	const props = defineProps({
		title:{
			type: String,
			default: ''
		},
		modelValue: {
			type: String,
			default: ''
		}
	})
	const emit = defineEmits(['update:modelValue'])
	const upload = () => {
		uni.chooseImage({
			count: 1,
			success(res) {
				uni.showLoading({
					title: '上传中...'
				})
				uploadImg({ filePath: res.tempFilePaths[0] }).then(result => {
					emit('update:modelValue', result.data.file_url)
				}).finally(() => {
					uni.hideLoading()
				})
			}
		})
	}
	const view=()=>{
		 uni.previewImage({
		 	urls:[props.modelValue]
		 })
	}
</script>

<style>
	.icon {
		width: 56px;
		height: 56px;
	}
</style>